<template>
  <div class="home" ref="homeRef">
    <div class="homeTop">
        <el-card class="homeCard">
          <template #header>
            <div class="homeTopLeft">
              <div>
                <div class="homeTopLeft1">
                  {{ thisTime }}!
                  {{ homeInformation?.name }}
                </div>
                <div class="homeTopLeft2">{{ HandleTips() || '又是活力满满的一天' }}</div>
              </div>
              <div>
                <div class="block">
                  <el-avatar class="homeImage" shape="square"  :src="homeInformation?.avatar" />
                </div>
              </div>
            </div>
          </template>
          <div class="homeTopLeft3">
          <div class="homeTopLeft3_1">
            <div class="homeTopLeft3Time">
              {{ timeList.year + '/' + timeList.month + '/' + timeList.day }}
              {{ timeList.hour + ':' + timeList.minute + ':' + timeList.second }}
            </div>
            <div class="homeTopLeft3Time1">
              {{ timeList.weekday }}
            </div>
          </div>
          </div>
        </el-card>
      <el-card class="homeCard1">
        <template #header>
          <div class="homeTopRight">
            <div class="homeCardTitleLeft">
              常用功能
            </div>
            <!-- <div class="homeCardTitleRight">
              查看更多
            </div> -->
          </div>
        </template>
        <div class="homeTopRight1 newRight">
          <div v-for="(item, index) in useList[dotIndex - 1]" :key="index" class="homeTopRight2 animated slideInLeft" @click="commonList(item)">
            <el-avatar class="homeImage1" shape="square"  :src="ossImageUrl(item.img)" />
            <div class="homeTopRightText">
              {{ item.title }}
            </div>
          </div>
          <div class="dotsBox">
            <div v-for="item in 2" :key="item" class="dots_pa" :class="{ 'active': dotIndex == item }" @click="handleSelectDot(item)">
              <div class="dots"></div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div>
      <el-card class="homeCard1">
        <template #header>
          <div class="homeTopRight">
            <div class="homeCardTitleLeft">
              业务统计
            </div>
          </div>
        </template>
        <div class="homeTopRight1 newRight flex_warp" v-loading="groupTotalLoading">
          <div v-for="(item, index) in _businessList" :key="index" class="homeMiddle">
            <el-avatar class="homeImage2" shape="square"  :src="ossImageUrl(item.img)" />
            <div style="margin-left: 16px">
             <div class="homeMiddle1">
               {{ item.title }}
             </div>
              <div class="homeMiddle2">
                {{ item.value ? NumberFormat(item.value) : 0 }}
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <section>
      <aside class="left">
        <SystemNotice class="notice" ref="systemNoticeRef"/>
        <CustomAnalysis class="analysis" ref="customAnalysisRef"/>
      </aside>
      <aside class="right">
        <RankingList ref="rankingListref"/>
      </aside>
    </section>
  </div>
</template>
<script lang="ts" setup>
import _ from 'lodash'
import { gp } from "/@vab/plugins/vab";
import router from "/@/router";
import { useSettingsStore } from "/@/store/modules/settings";
import homeList, { anyTime, ossImageUrl } from "/@/views/index/storeList";

import SystemNotice from './vabAutoComponents/SystemNotice.vue'
import CustomAnalysis from './vabAutoComponents/CustomAnalysis.vue'
import RankingList from './vabAutoComponents/RankingList.vue'
import { BusinessList, CommonUseList, HandleTips } from './vabAutoComponents/tools';
import { getOrderGroupTotal } from '~/src/api/dms/home';
import { ArraySliceLength, NumberFormat } from '~/src/utils/utils';

defineOptions({
  name: 'Index',
})

/**
 * @var
 */
const route = useRoute()
const thisTime = ref<any>('你好')
const homeInformation = ref<any>({ name: '--', avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png' })
const timeList = ref<any>({
  year: '--',
  month: '--',
  day: '--',
  hour: '--',
  minute: '--',
  second: '--',
  weekday: '--'
})
//常用功能 页面跳转
const commonList = (value: any) => {
  router.push(value.url)
}

const systemNoticeRef = ref()
const customAnalysisRef = ref()
const rankingListref = ref()
const homeRef = ref()

const groupTotalLoading = ref(false)
const dotIndex = ref(1)

// 常用
const useList = ref<any>([])
const _businessList = ref<any>(BusinessList)


/**
 * @method
 */

watchEffect(async () => {
  const settingsStore = useSettingsStore()
  const homeDate = homeList()
  const hour = new Date().getHours()
  thisTime.value =
    hour < 8
      ? '早上好'
      : hour <= 9
        ? '上午好'
        : hour <= 14
          ? '中午好'
          : hour < 19
            ? '下午好'
            : '晚上好'
  if (route.query.dd) {
    gp.$baseNotify(`欢迎登录${settingsStore.title}`, `${thisTime.value}！`)
    await router.push('/index')
  }
  homeInformation.value = homeDate.information

})


/**
 * @method
 */
// 业务统计
const _getOrderGroupTotal = async () => {

  groupTotalLoading.value = true

  try {
    let res = await getOrderGroupTotal()
    _businessList.value.forEach((item: any) => {
        for (const key in res.data) {
          if (item.key == key) {
            item.value = res.data[key]
          }
        }
      })

    groupTotalLoading.value = false

  } catch (error) {
  }
}

const handleSelectDot = (i: number) => {
  dotIndex.value = i
}


const _getUseList = (length = 6) => {
  useList.value = ArraySliceLength(CommonUseList, length)
}

onUnmounted(() => {
  // 卸载
  clearInterval(timeList.value)
  timeList.value = null
})

nextTick(() => {
  _getOrderGroupTotal()
  setInterval(() => { timeList.value = anyTime() }, 1000)

  // 页面刷新
  if (window.innerWidth > 1300) _getUseList()
  if (window.innerWidth < 1300) _getUseList(4)

  // 监听窗口
  window.addEventListener('resize', () => {
    const w = document.documentElement.clientWidth;
    const h = document.documentElement.clientHeight;
    if (w < 1300) _getUseList(4)
    if (w > 1300) _getUseList()
  });
})
</script>


<style lang="scss" scoped>
@import './index';
</style>
